<template>
	<view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon1.png" mode=""></image>
				</view>
				<view class="">
					客户信息
				</view>
			</view>

			<view class="inputs">
				<view class="text_l">
					姓名
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.customerName" type="text" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs" style="border: none;padding-bottom: 0rpx;">
				<view class="text_l">
					电话
				</view>
				<view class="text_r">
					<input maxlength="11" confirm-type="done" v-model="params.customerPhone" type="number"
						placeholder="请输入" placeholder-class="inputplace" />
				</view>
			</view>
		</view>


		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon2.png" mode=""></image>
				</view>
				<view class="">
					包型及尺寸
				</view>
			</view>
			<view class="inputs" style="border: none;padding-bottom: 0rpx;">
				<view class="" style="width: 65%;display: flex;align-items: center;">
					<view class="text_l">
						包型
					</view>
					<view class="text_select" @click="openPopup('包型','bwd_type',mevalue.baoxing)">
						<view class="select" :class="mevalue.baoxing==''?'':'selectact'">
							{{mevalue.baoxing?mevalue.baoxing:'请选择'}}
						</view>
						<view class="">
							<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
						</view>
					</view>
				</view>
				<view class="" style="width: 50%;display: flex;align-items: center;box-sizing: border-box;">
					<view class="text_l" style="width: 100rpx;">
						工艺
					</view>
					<view class="" style="font-size: 28rpx;" v-if="params.productType == 'CW'">
						{{mevalue.gongyi}}
					</view>
					<view v-else class="text_select" @click="openPopup('工艺','bwd_craft',mevalue.gongyi)">
						<view class="select" :class="mevalue.gongyi==''?'':'selectact'">
							{{mevalue.gongyi?mevalue.gongyi:'请选择'}}
						</view>
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
			</view>
			<view class="sc_flex" v-if="params.productType">
				<view class="item i1">
					<view class="">长(cm)</view>
					<input confirm-type="done" type="digit" v-model="params.sizeLong" />
				</view>
				<view class="item i1">
					<view class="">宽(cm)</view>
					<input confirm-type="done" type="digit" v-model="params.sizeWidth" />
				</view>
				<view class="item i1">
					<view class="">高(cm)</view>
					<input confirm-type="done" type="digit" v-model="params.sizeHeight" />
				</view>
			</view>
		</view>


		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon5.png" mode=""></image>
				</view>
				<view class="">
					类型及材质
				</view>
			</view>
			<view class="" v-if="params.craftCode">
				<view class="inputs">
					<view class="text_l">
						面料(大片)
					</view>
					<view class="text_select" @click="openPopup('面料(大片)','materialType',mevalue.mianliaoda,'面料')">
						<view class="select" :class="mevalue.mianliaoda==''?'':'selectact'">
							{{mevalue.mianliaoda?mevalue.mianliaoda:'请选择'}}
						</view>
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
				<view class="inputs">
					<view class="text_l">
						面料(侧围)
					</view>
					<view class="text_select" @click="openPopup('面料(侧围)','materialType',mevalue.mianliaoce,'面料')">
						<view class="select" :class="mevalue.mianliaoce==''?'':'selectact'">
							{{mevalue.mianliaoce?mevalue.mianliaoce:'请选择'}}
						</view>
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
				<view class="inputs">
					<view class="text_l">
						棉
					</view>
					<view class="text_select" @click="openPopup('棉','materialType',mevalue.mian,'棉')">
						<view class="select" :class="mevalue.mian==''?'':'selectact'">
							{{mevalue.mian?mevalue.mian:'请选择'}}
						</view>
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
				<view class="inputs">
					<view class="text_l">
						包边
					</view>
					<view class="text_select" @click="openPopup('包边','materialType',mevalue.baobian,'提手包边')">
						<view class="select" :class="mevalue.baobian==''?'':'selectact'">
							{{mevalue.baobian?mevalue.baobian:'请选择'}}
						</view>
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
				<view class="inputs">
					<view class="text_l">
						提手材质
					</view>
					<view class="text_select" @click="openPopup('提手材质','materialType',mevalue.tishou,'提手包边')">
						<view class="select" :class="mevalue.tishou==''?'':'selectact'">
							{{mevalue.tishou?mevalue.tishou:'请选择'}}
						</view>
						<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
					</view>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					提手长度
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.tsLong" type="digit" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view v-if="params.productType!= 'FX' && params.craftCode =='手工'" class="inputs"
				style="border-bottom: none;padding-bottom: 0rpx;">
				<view class="text_l">
					捏提手
				</view>
				<view class="">
					<radio-group @change="radioChange">
						<label style="margin-right: 30rpx;" v-for="(item,index) in radioList" :key='index'>
							<radio style="scale: 0.7;" color="#196AEB" :value="item.dictValue" />{{item.dictLabel}}
						</label>
					</radio-group>
				</view>
			</view>

		</view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon3.png" mode=""></image>
				</view>
				<view class="">
					更多信息
				</view>
			</view>


			<view class="inputs" v-if="params.productType == 'FX'">
				<view class="text_l">
					拉头数量
				</view>
				<view class="text_select" @click="openPopup('拉头数量','',mevalue.latou)">
					<view class="select" :class="mevalue.latou==''?'':'selectact'">
						{{mevalue.latou?mevalue.latou:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs" v-if="params.productType == 'FX'">
				<view class="text_l">
					拉头材质
				</view>
				<view class="text_select" @click="openPopup('拉头材质','bwd_lt_type',mevalue.latoucaizhi)">
					<view class="select" :class="mevalue.latoucaizhi==''?'':'selectact'">
						{{mevalue.latoucaizhi?mevalue.latoucaizhi:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs" v-if="params.productType != 'FX'">
				<view class="text_l">
					魔术贴
				</view>
				<view class="text_select" @click="openPopup('魔术贴','',mevalue.moshutie)">
					<view class="select" :class="mevalue.moshutie==''?'':'selectact'">
						{{mevalue.moshutie?mevalue.moshutie:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>

			<view class="inputs">
				<view class="text_l">
					数量
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.productCount" type="number" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					包装方式
				</view>
				<view class="text_select" @click="openPopup('包装方式','bwd_package_type',mevalue.baozhuangfangshi)">
					<view class="select" :class="mevalue.baozhuangfangshi==''?'':'selectact'">
						{{mevalue.baozhuangfangshi?mevalue.baozhuangfangshi:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="inputs">
				<view class="text_l">
					印刷工艺
				</view>
				<view class="text_select" @click="openPopup('印刷工艺','bwd_printing_type',mevalue.yishuagongyi)">
					<view class="select" :class="mevalue.yishuagongyi==''?'':'selectact'">
						{{mevalue.yishuagongyi?mevalue.yishuagongyi:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
			<view class="" v-if="params.printingCode!='无'">
				<view class="inputs" v-if="params.printingCode !='覆膜印'">
					<view class="text_l">
						印刷费
					</view>
					<view class="text_r">
						<input confirm-type="done" v-model="params.printingPrice" type="digit" placeholder="请输入"
							placeholder-class="inputplace" />
					</view>
				</view>
				<view class="inputs" v-if="params.printingCode =='覆膜印'">
					<view class="text_l">
						印刷版数
					</view>
					<view class="text_r">
						<input confirm-type="done" v-model="params.editionCount" type="number" placeholder="请输入"
							placeholder-class="inputplace" />
					</view>
				</view>
			</view>

			<view class="inputs">
				<view class="text_l">
					其他费用
				</view>
				<view class="text_r">
					<input confirm-type="done" v-model="params.otherAddPrice" type="digit" placeholder="请输入"
						placeholder-class="inputplace" />
				</view>
			</view>
			<view class="inputs" style="border: none;padding-bottom: 0rpx;">
				<view class="text_l">
					税点
				</view>
				<view class="text_select" @click="openPopup('税点','self_tax_type',mevalue.shuidian)">
					<view class="select" :class="mevalue.shuidian==''?'':'selectact'">
						{{mevalue.shuidian?mevalue.shuidian:'请选择'}}
					</view>
					<uni-icons type="right" size="18" color="#4C5BFF"></uni-icons>
				</view>
			</view>
		</view>
		<view class="its">
			<view class="it_tit">
				<view class="">
					<image src="@/static/icon4.png" mode=""></image>
				</view>
				<view class="">
					打包体积
				</view>
			</view>
			<view class="tj">
				<view class="ti_flex">
					<view class="texts">{{mevalue.pingfang}}</view>
					<view class="dw">m³</view>
				</view>
				<view class="btn" @click="jsbj">
					点击计算
				</view>
			</view>
		</view>
		<view class="zw">
		</view>
		<view class="btns" @click="handleTj">
			<view class="text">报价</view>
		</view>
		<uni-popup type="bottom" ref="popup" :safe-area="false">
			<view class="popup">
				<view class="pop_tit">
					请选择{{textType}}
				</view>
				<view class="pop_list">
					<view class="ites" v-for="(item,index) in list" :key="index" @click="changeType(item)"
						:class="item.dictLabel==dictLabel?'itesactive':''">
						{{item.dictLabel}}
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupbj" type="center">
			<view class="popupbj">
				<view class="title">报价结果</view>
				<uni-icons @click="close" class="icons" type="closeempty" size="20"></uni-icons>
				<view class="cont_top">
					<view class="flex_l">
						<view class="itss">
							姓名 <span>{{nowinfo.customerName}}</span>
						</view>
						<view class="itss">
							电话 <span>{{nowinfo.customerPhone}}</span>
						</view>
					</view>
					<view class="flex_r">
						<image :src="url" mode=""></image>
						<view class="ts">模型展示</view>
					</view>
				</view>
				<view class="cont_c">
					<view class="item">
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">包型</view>
							<view class="">{{nowinfo.productType}}</view>
						</view>
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">工艺</view>
							<view class="">{{nowinfo.craftCode}}</view>
						</view>
					</view>
					<view class="item">
						<view class="i_ltext">尺寸</view>
						<view class="">
							<span v-if="nowinfo.sizeLong">
								长:{{nowinfo.sizeLong}} cm；
							</span>
							<span v-if="nowinfo.sizeWidth">
								宽:{{nowinfo.sizeWidth}} cm；
							</span>
							<span v-if="nowinfo.sizeHeight">
								高:{{nowinfo.sizeHeight}} cm；
							</span>
						</view>
					</view>
					<view class="item" >
						<view class="i_ltext">面料</view>
						<view class="">{{nowinfo.dpMlCode}}/{{nowinfo.cwMlCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">棉</view>
						<view class="">{{nowinfo.mmCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">包边</view>
						<view class="">{{nowinfo.bbtCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">提手材质</view>
						<view class="">{{nowinfo.tsCode}}</view>
					</view>
					<view class="item">
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">提手长度</view>
							<view class="">{{nowinfo.tsLong}} cm</view>
						</view>
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">捏提手</view>
							<view class="">{{nowinfo.costTsMake==1?'是':'否'}}</view>
						</view>
					</view>
					<view class="item" v-if="nowinfo.magic">
						<view class="i_ltext">魔术贴</view>
						<view class="">{{nowinfo.magic}}</view>
					</view>
					<view class="item">
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">数量</view>
							<view class="">{{nowinfo.productCount}}</view>
						</view>
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">包装方式</view>
							<view class="">{{nowinfo.packageCode}}</view>
						</view>
					</view>
					<view class="item">
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">印刷工艺</view>
							<view class="">{{nowinfo.printingCode}}</view>
						</view>
						<view class="" style="display: flex;align-items: center;width: 50%;">
							<view class="i_ltext">印刷费</view>
							<view class="">{{nowinfo.printingPrice}}</view>
						</view>
					</view>
					<view class="item">
						<view class="i_ltext">其他费用</view>
						<view class="">{{nowinfo.otherAddPrice}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">税点</view>
						<view class="">{{nowinfo.taxCode}}</view>
					</view>
					<view class="item">
						<view class="i_ltext">打包体积</view>
						<view class="">{{nowinfo.volume}} m³</view>
					</view>
				</view>
				<view class="cont_b">
					<view class="b_l">
						最终单价(元) <span>含税</span>
					</view>
					<view class="b_r">
						<span>￥</span>{{nowinfo.sellPrice}}
					</view>
				</view>
				<view class="cont_b" v-if="nowinfo.editionAmount">
					<view class="b_l">
						版费(元)
					</view>
					<view class="b_r">
						<span>￥</span>{{nowinfo.editionAmount}}
					</view>
				</view>
				<view class="btn" @click="gopage2img">
					生成海报
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getdict,
		computedTjbwd,
		postQuotebwd,
		bwdall
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				nowinfo:{},
				radioList: [],
				params: {
					"customerName": "", //姓名
					"customerPhone": "", //电话
					"sizeLong": '', //长
					"sizeWidth": '', //宽
					"sizeHeight": '', //高

					"productType": "", //包型
					"productCount": '', //数量
					"craftCode": "", //工艺


					"dpMlCode": "", //面料
					"cwMlCode": "", //侧围面料
					"mmCode": "", //棉
					"bbtCode": "", //包边
					"tsCode": "", //提手
					"tsLong": '', //提手长度
					"costTsMake": '', //捏提手  1是 0否
					"packageCode": "", //包装方式
					"printingCode": "", //印刷工艺 
					"printingPrice":'', //印刷费 覆膜印没有
					"taxCode": "", //岁点
					"otherAddPrice":'', //其他费用
					"ltCode": "", //拉头材质
					"ltCount": '', //拉头数量 
					"magic": "", //魔术贴
					"editionCount": '' //印刷板数 覆膜印才有
				},


				mevalue: {
					baoxing: '', //bwd_type
					gongyi: '', //bwd_craft
					mianliaoda: '', //
					mianliaoce: '',
					mian: '',
					baobian: '',
					tishou: '',


					latou: '',
					latoucaizhi: '', //bwd_lt_type
					moshutie: '',
					baozhuangfangshi: '', //bwd_package_type
					yishuagongyi: '', //bwd_printing_type
					shuidian: '', //self_tax_type
					pingfang:0
				},
				list: [],
				dictLabel: '', //弹窗公共渲染值
				textType: '', //弹窗公共渲染值

				latoulist: [{
						dictLabel: '1个',
						dictValue: 1,
					},
					{
						dictLabel: '2个',
						dictValue: 2,
					}
				],
				moshutielist: [{
						dictLabel: '2CM',
						dictValue: '2CM',
					},
					{
						dictLabel: '3CM',
						dictValue: '3CM',
					}
				]
			};
		},
		onLoad() {
			getdict('self_yes_no_success').then(res => {
				this.radioList = res.data
			})
		},
		computed:{
			url(){
				if(this.nowinfo.productType){
					return 	`/static/img/${this.nowinfo.productType}.png`
				}
			}
		},
		methods: {
			gopage2img() {
				uni.setStorageSync('hbinfo', this.nowinfo)
				uni.navigateTo({
					url: '/pages/ipage/page3hb'
				})
			},
			close() {
				this.$refs.popupbj.close()
			},
			//单选
			radioChange(e) {
				this.params.costTsMake = e.detail.value
			},
			openPopup(text, url, value, type) {
				this.list = []
				this.textType = text //弹窗
				if (text == '拉头数量') {
					this.list = this.latoulist
					this.dictLabel = this.list.find(item => item.dictLabel == value)?.dictLabel
					this.$refs.popup.open()
				} else if (text == '魔术贴') {
					this.list = this.moshutielist
					this.dictLabel = this.list.find(item => item.dictLabel == value)?.dictLabel
					this.$refs.popup.open()
				} else if (text == '面料(大片)' ||
					text == '面料(侧围)' || text == '棉' ||
					text == '包边' || text == '提手材质') {
					bwdall({
						materialType: type,
						craftCode: this.params.craftCode
					}).then(res => {
						this.list = res.data.map(item => {
							return {
								dictLabel: item.materialCode,
								dictValue: item.materialCode,
							}
						})
						this.dictLabel = this.list.find(item => item.dictLabel == value)?.dictLabel
						this.$refs.popup.open()
					})
				} else {
					getdict(url).then(res => {
						this.list = res.data
						this.dictLabel = this.list.find(item => item.dictLabel == value)?.dictLabel
						this.$refs.popup.open()
					})
				}



			},
			changeType(item) {
				console.log(this.textType, item.dictLabel, item.dictValue);
				if (this.textType == '包型') {
					this.mevalue.baoxing = item.dictLabel
					this.params.productType = item.dictValue
					if (this.params.productType == 'CW') {
						this.mevalue.gongyi = '手工'
						this.params.craftCode = '手工'
					}
				} else if (this.textType == '工艺') {
					this.mevalue.gongyi = item.dictLabel
					this.params.craftCode = item.dictValue
				} else if (this.textType == '面料(大片)') {
					this.mevalue.mianliaoda = item.dictLabel
					this.params.dpMlCode = item.dictValue
				}  else if (this.textType == '面料(侧围)') {
					this.mevalue.mianliaoce = item.dictLabel
					this.params.cwMlCode = item.dictValue
				} else if (this.textType == '棉') {
					this.mevalue.mian = item.dictLabel
					this.params.mmCode = item.dictValue
				} else if (this.textType == '包边') {
					this.mevalue.baobian = item.dictLabel
					this.params.bbtCode = item.dictValue
				} else if (this.textType == '提手材质') {
					this.mevalue.tishou = item.dictLabel
					this.params.tsCode = item.dictValue
				}else if (this.textType == '拉头数量') {
					this.mevalue.latou = item.dictLabel
					this.params.ltCount = item.dictValue
				} else if (this.textType == '拉头材质') {
					this.mevalue.latoucaizhi = item.dictLabel
					this.params.ltCode = item.dictValue
				} else if (this.textType == '魔术贴') {
					this.mevalue.moshutie = item.dictLabel
					this.params.magic = item.dictValue
				} else if (this.textType == '包装方式') {
					this.mevalue.baozhuangfangshi = item.dictLabel
					this.params.packageCode = item.dictValue
				} else if (this.textType == '印刷工艺') {
					this.mevalue.yishuagongyi = item.dictLabel
					this.params.printingCode = item.dictValue
					if (this.params.printingCode == '无') {
						this.params.printingPrice = ''
						this.params.editionCount = ''
					} else if (this.params.printingCode == '覆膜印') {
						this.params.printingPrice = ''
					}
				} else if (this.textType == '税点') {
					this.mevalue.shuidian = item.dictLabel
					this.params.taxCode = item.dictValue
				}
				this.$refs.popup.close()
			},
			jsbj() {
				if (this.params.productType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择包型'
					})
					return
				}
				if (this.params.sizeLong == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸长不能为空'
					})
					return
				}
				if (this.params.sizeWidth == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸宽不能为空'
					})
					return
				}
				if (this.params.sizeHeight == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸高不能为空'
					})
					return
				}
				if (this.params.mmCode == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择棉材质'
					})
					return
				}
				if (this.params.productCount == '') {
					uni.showToast({
						icon: 'none',
						title: '数量不能为空'
					})
					return
				}
				let obj = {
					mmCode: this.params.mmCode,
					productType: this.params.productType,
					sizeLong: this.params.sizeLong,
					sizeHeight: this.params.sizeHeight,
					sizeWidth: this.params.sizeWidth,
					productCount: this.params.productCount,
				}
				computedTjbwd(obj).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '计算结果已更新'
						})
						this.mevalue.pingfang = res.data
					}
				})
			},
			handleTj() {
				if (this.params.craftCode == '机制' || this.params.productType == 'FX') {
					this.params.costTsMake = '0'
				}
				if (this.params.customerName == '') {
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空'
					})
					return
				}
				if (this.params.customerPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '电话不能为空'
					})
					return
				}
				if (this.params.productType == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择包型'
					})
					return
				}
				if (this.params.sizeLong == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸长不能为空'
					})
					return
				}
				if (this.params.sizeWidth == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸宽不能为空'
					})
					return
				}
				if (this.params.sizeHeight == '') {
					uni.showToast({
						icon: 'none',
						title: '尺寸高不能为空'
					})
					return
				}
				if (this.params.taxCode == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择税点'
					})
					return
				}
				
				postQuotebwd(this.params).then(res=>{
					if (res.code == 200) {
						this.nowinfo = res.data
						this.$refs.popupbj.open()
					}else{
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.popupbj {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.cont_top {
			width: 630rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			padding: 16rpx 26rpx 10rpx 20rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.flex_l {
				.itss {
					margin-bottom: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					line-height: 33rpx;

					span {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						margin-left: 20rpx;
					}
				}

			}

			.flex_r {
				text-align: center;

				image {
					width: 160rpx;
					height: 160rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1rpx solid #DADADA;
				}

				.ts {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #C9C9C9;
				}
			}
		}

		.cont_c {
			border-bottom: 1px solid #eee;
			padding-bottom: 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;

			.item {
				display: flex;
				margin: 18rpx auto;
				align-items: center;

				.i_ltext {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #979797;
					margin-right: 20rpx;
				}
			}
		}

		.cont_b {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 32rpx auto;

			.b_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF1919;
					margin-left: 6rpx;
				}
			}

			.b_r {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FF1A1A;

				span {
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 520rpx;
			height: 80rpx;
			background: #196AEB;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
		}
	}

	.inputplace {
		color: #DADADA;
		font-size: 28rpx;
	}

	.its {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx auto;
		padding: 28rpx 26rpx 26rpx 26rpx;
		box-sizing: border-box;

		.sc_flex {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 20rpx auto;

			.item {
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;

				input {
					width: 90%;
					height: 68rpx;
					background: #F6F6F6;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-top: 15rpx;
				}
			}

			.i1 {
				width: 33%;
			}

			.i2 {
				width: 50%;
				margin: 25rpx auto 30rpx;
			}
		}

		.flex_jub {
			display: flex;
			justify-content: space-between;
		}

		.it_tit {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}

			font-family: PingFang SC,
			PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.tj {
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;

			.texts {
				width: 306rpx;
				height: 60rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding-left: 10rpx;
				font-size: 28rpx;
				line-height: 60rpx;
			}

			.ti_flex {
				display: flex;
				align-items: center;

				.dw {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					margin-left: 10rpx;
				}
			}

			.btn {
				height: 60rpx;
				background: #196AEB;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				padding: 0 16rpx;
			}
		}

		.inputs {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			margin-top: 30rpx;
			padding-bottom: 26rpx;
			position: relative;

			.ads {
				position: absolute;
				bottom: 0%;
				font-size: 24rpx;
				color: red;
			}

			.text_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				width: 174rpx;
			}

			.text_r {
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.text_select {
				flex: 1;
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				align-items: center;

				.select {
					color: #DADADA;
				}

				.selectact {
					color: #000000;
				}
			}
		}
	}

	.btns {
		position: fixed;
		bottom: 0%;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		background-color: #F7F8FA;

		.text {
			width: 710rpx;
			height: 100rpx;
			background: #196AEB;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			margin: 0 auto;
			box-sizing: border-box;
		}
	}

	.zw {
		height: calc(110rpx + constant(safe-area-inset-bottom));
		height: calc(110rpx + env(safe-area-inset-bottom));
	}

	.popup {
		width: 750rpx;
		max-height: 720rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -12rpx 26rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 48rpx 76rpx;
		box-sizing: border-box;

		.pop_tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.pop_list {
			overflow: auto;
			max-height: 560rpx;
			margin-top: 20rpx;
		}

		.ites {
			height: 120rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.itesactive {
			background: #196AEB;
			color: #ffffff;
		}
	}
</style>